<template>
  <Transition name="detail-fade">
    <div v-if="station" class="station-detail">
      <!-- 头部信息 -->
      <div class="detail-header">
        <div class="header-icon">
          <span class="type-emoji">{{ getTypeIcon(station.sttype) }}</span>
        </div>
        <div class="header-info">
          <h1 class="station-name">{{ station.stnm }}</h1>
          <div class="station-badges">
            <span class="badge type">{{ getStationTypeName(station.sttype) }}</span>
            <span class="badge code">{{ station.stcd }}</span>
          </div>
        </div>
        <button class="close-btn" @click="$emit('close')" title="关闭">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M18 6 6 18M6 6l12 12"/>
          </svg>
        </button>
      </div>
      
      <!-- 详情内容 -->
      <div class="detail-body">
        <!-- 位置信息卡片 -->
        <div class="info-card location">
          <div class="card-header">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
              <circle cx="12" cy="10" r="3"/>
            </svg>
            <span>位置信息</span>
          </div>
          <div class="card-content">
            <div class="info-row">
              <span class="label">所在位置</span>
              <span class="value">{{ station.stlc || '-' }}</span>
            </div>
            <div class="info-row coordinates">
              <div class="coord-item">
                <span class="coord-label">经度</span>
                <span class="coord-value">{{ formatCoord(station.lon, 'E') }}</span>
              </div>
              <div class="coord-item">
                <span class="coord-label">纬度</span>
                <span class="coord-value">{{ formatCoord(station.lat, 'N') }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 流域信息卡片 -->
        <div class="info-card basin">
          <div class="card-header">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M2 12h4l3-9 4 18 3-9h4"/>
            </svg>
            <span>水文信息</span>
          </div>
          <div class="card-content">
            <div class="info-row">
              <span class="label">所属流域</span>
              <span class="value highlight">{{ station.bsnm || '-' }}</span>
            </div>
            <div class="info-row">
              <span class="label">水系名称</span>
              <span class="value">{{ station.hnnm || '-' }}</span>
            </div>
            <div class="info-row">
              <span class="label">河流名称</span>
              <span class="value">{{ station.rvnm || '-' }}</span>
            </div>
          </div>
        </div>
        
        <!-- 系统信息卡片 -->
        <div class="info-card system">
          <div class="card-header">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="3"/>
              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
            </svg>
            <span>系统信息</span>
          </div>
          <div class="card-content">
            <div class="info-row">
              <span class="label">创建时间</span>
              <span class="value mono">{{ formatDate(station.created_at) }}</span>
            </div>
            <div class="info-row">
              <span class="label">更新时间</span>
              <span class="value mono">{{ formatDate(station.updated_at) }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 底部操作 -->
      <div class="detail-footer">
        <button class="action-btn secondary" @click="copyStationInfo">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
          </svg>
          复制信息
        </button>
        <button class="action-btn primary" @click="viewOnMap">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/>
            <line x1="8" y1="2" x2="8" y2="18"/>
            <line x1="16" y1="6" x2="16" y2="22"/>
          </svg>
          查看地图
        </button>
      </div>
    </div>
  </Transition>
</template>

<script setup>
import { getStationTypeName } from './api.js'

const props = defineProps({
  station: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['close', 'view-map'])

// 站点类型图标
const typeIconMap = {
  'RR': '🏭',
  'PP': '🌧️',
  'ZZ': '📊',
  'ZQ': '📈',
  'DD': '🚧',
  'MM': '🌡️',
  'DEFAULT': '📍'
}

function getTypeIcon(type) {
  return typeIconMap[type] || typeIconMap['DEFAULT']
}

// 格式化坐标
function formatCoord(value, suffix) {
  if (!value && value !== 0) return '-'
  return `${value.toFixed(6)}°${suffix}`
}

// 格式化日期
function formatDate(dateStr) {
  if (!dateStr) return '-'
  try {
    const date = new Date(dateStr)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    })
  } catch {
    return dateStr
  }
}

// 复制站点信息
async function copyStationInfo() {
  if (!props.station) return
  
  const info = `测站名称：${props.station.stnm}
测站编码：${props.station.stcd}
站点类型：${getStationTypeName(props.station.sttype)}
所在位置：${props.station.stlc || '-'}
经度：${props.station.lon}
纬度：${props.station.lat}
所属流域：${props.station.bsnm || '-'}
水系名称：${props.station.hnnm || '-'}
河流名称：${props.station.rvnm || '-'}`

  try {
    await navigator.clipboard.writeText(info)
    uni.showToast({
      title: '已复制到剪贴板',
      icon: 'success'
    })
  } catch (error) {
    console.error('复制失败:', error)
    uni.showToast({
      title: '复制失败',
      icon: 'none'
    })
  }
}

// 查看地图
function viewOnMap() {
  if (!props.station) return
  emit('view-map', {
    lon: props.station.lon,
    lat: props.station.lat,
    name: props.station.stnm
  })
}
</script>

<style scoped>
.station-detail {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  max-width: 520px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 过渡动画 */
.detail-fade-enter-active,
.detail-fade-leave-active {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.detail-fade-enter-from,
.detail-fade-leave-to {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
}

/* 头部 */
.detail-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 28px 20px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 102, 255, 0.1) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.header-icon {
  flex-shrink: 0;
}

.type-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  font-size: 32px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 102, 255, 0.2) 100%);
  border-radius: 16px;
  border: 1px solid rgba(0, 212, 255, 0.3);
}

.header-info {
  flex: 1;
  min-width: 0;
}

.station-name {
  font-size: 22px;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0 0 10px;
  line-height: 1.3;
}

.station-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
}

.badge.type {
  background: linear-gradient(135deg, #00d4ff 0%, #0066ff 100%);
  color: white;
}

.badge.code {
  background: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-family: 'Monaco', 'Consolas', monospace;
}

.close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  cursor: pointer;
  color: #94a3b8;
  transition: all 0.2s;
}

.close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  transform: rotate(90deg);
}

.close-btn svg {
  width: 18px;
  height: 18px;
}

/* 内容区域 */
.detail-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 信息卡片 */
.info-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
}

.card-header svg {
  width: 16px;
  height: 16px;
  color: #00d4ff;
}

.card-content {
  padding: 12px 16px;
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.info-row:not(:last-child) {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

.info-row .label {
  font-size: 13px;
  color: #64748b;
  flex-shrink: 0;
}

.info-row .value {
  font-size: 13px;
  color: #e2e8f0;
  font-weight: 500;
  text-align: right;
}

.info-row .value.highlight {
  color: #00d4ff;
  font-weight: 600;
}

.info-row .value.mono {
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 12px;
  color: #94a3b8;
}

/* 坐标行 */
.info-row.coordinates {
  display: flex;
  gap: 24px;
  justify-content: flex-start;
}

.coord-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.coord-label {
  font-size: 11px;
  color: #64748b;
}

.coord-value {
  font-size: 14px;
  font-weight: 600;
  color: #4ade80;
  font-family: 'Monaco', 'Consolas', monospace;
}

/* 底部操作 */
.detail-footer {
  display: flex;
  gap: 12px;
  padding: 16px 24px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn svg {
  width: 16px;
  height: 16px;
}

.action-btn.secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
}

.action-btn.primary {
  background: linear-gradient(135deg, #00d4ff 0%, #0066ff 100%);
  color: white;
}

.action-btn.primary:hover {
  background: linear-gradient(135deg, #00e5ff 0%, #0077ff 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
}
</style>

